<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swmm Page</title>

    <link href="css/custom/swmm.css" rel="stylesheet" type="text/css">
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" />-->
    <link href="css/jquery.jexcel.css" rel="stylesheet" type="text/css">
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <!--banner-->
    <link href="css/navbar.css" rel="stylesheet">
    <!--字体-->
    <link href="css/awesome-bootstrap-checkbox.css" rel="stylesheet" type="text/css">
    <!--Option Dates中的日期时间-->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <!--Option Time Step中的时间选择器-->
    <link href="css/jeDate-test.css" rel="stylesheet" type="text/css">
    <link href="css/jedate.css" rel="stylesheet" type="text/css">
    <!--Openlayer-->
    <link href="css/ol.css" rel="stylesheet" type="text/css">
    <!--侧边栏特效-->
    <!--<link href="css/style.css" rel="stylesheet" type="text/css">-->
    <!--loading动画特效-->
    <!--<link rel="stylesheet" href="loading/css/animate.css">-->
    <!--<link rel="stylesheet" href="loading/css/global.css">-->
    <link href="css/loading.css" rel="stylesheet">
    <link href="css/bootstrap-table.css" rel="stylesheet">

    <style>
        body{
            overflow-x: hidden;
        }
        #spinner {
            width: 50px;
            height: 60px;
            text-align: center;
            font-size: 10px;
            position: absolute;
            top: calc(50% - 30px);
            left: calc(50% - 25px);
            z-index: 999;
            display: none;
        }

        #spinner > div {
            background-color: #67CF22;
            height: 100%;
            width: 6px;
            display: inline-block;

            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        #spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        #spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        #spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        #spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4)
            }
            20% {
                -webkit-transform: scaleY(1.0)
            }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% {
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
            }
            20% {
                transform: scaleY(1.0);
                -webkit-transform: scaleY(1.0);
            }
        }
    </style>

</head>
<body style="overflow-y: hidden">
<!--<div class="spinner" id="spinner">-->
<!--<div class="rect1"></div>-->
<!--<div class="rect2"></div>-->
<!--<div class="rect3"></div>-->
<!--<div class="rect4"></div>-->
<!--<div class="rect5"></div>-->
<!--</div>-->

<!--start 导航条-->
<div class="head navbar-fixed-top">
    <nav class="navbar navbar-default pcnav" role="navigation">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar-header">
                        <a href="http://geomodeling.njnu.edu.cn/PortalNew/" class="navbar-brand"></a>
                    </div>
                    <div id="webswmm-banner">Web Storm Water Management System</div>
                </div>
            </div>
        </div>
    </nav>
</div>

<div style="display:flex;margin-top:60px">
    <div style = "width:15%" class="left">
        <div class="treepanel"  style="z-index: 1">
            <div id="treeview" class="treeview"></div>
            <!--<div id="dataitem-left" class="dataitem-left"></div>-->
            <!--<div id="datalist-left" class="list-group datalist-left"></div>-->
        </div>
    </div>
    <div style = "width:85%" class="right">
        <div class="mappanel" style="z-index: -1;" id="panel-map">

        </div>

    </div>
</div>
<!--地图容器-->
<!--表单提交-->
<div class="div-button-group">

    <div class="form-group has-feedback" id="div-projection">
        <!--<label class="control-label" for="input-projection">Input with success</label>-->
        <input type="text" class="form-control input-projection" id="input-projection" aria-describedby="inputSuccess2Status"
               placeholder="Define Projection in Proj4js Format" title='Example: proj4.defs("EPSG:2385","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs);' style="z-index: 1;">
        <span class="glyphicon form-control-feedback" id="span-projection-success" aria-hidden="true"></span>
        <!--<span id="inputSuccess2Status" class="sr-only">(success)</span>-->
    </div>

    <!--按钮组-->
    <div class="div-form-group">
        <!--打开文件-->


        <!--UDX输入-->
        <div class="div-map  active" id="div-map-openudx" style="z-index: 1;">
            <button class="btn-runmodel fa fa-file-o" id="button-map-openudx" data-toggle="modal" data-target="#modal-openudx" style="color: #fff;"></button>
        </div>
        <!--选择要使用的模型服务节点-->
        <div class="div-map  active" id="div-map-selectService" style="z-index: 1;">
            <button class="btn-runmodel fa fa-server" id="button-map-selectService" data-toggle="modal" data-target="#modal-selectService" style="color: #fff;"></button>
        </div>
        <!--迁移模型服务-->
        <div class="div-map  active" id="div-map-migrateService" style="z-index: 1;">
            <button class="btn-runmodel fa fa-location-arrow" id="button-map-migrateService" data-toggle="modal" data-target="#modal-migrateService" style="color: #fff;"></button>
        </div>
        <!--跑模型-->
        <div class="div-map  active" id="div-map-runmodel" style="z-index: 1;">
            <button class="btn-runmodel fa fa-play" id="button-map-runmodel" data-toggle="modal"   style="color: #fff;"></button>
        </div>
        <!--可视化结果-->
        <div class="div-map  active" id="div-map-view" style="z-index: 1;">
            <button class="btn-runmodel fa fa-area-chart" id="button-map-view" style="color: #fff;"></button>
        </div>
        <!--下载结果-->
        <div class="div-map  active" id="div-map-download" style="z-index: 1;">
            <button class="btn-runmodel fa fa-download" id="button-map-download" style="color: #fff;"></button>
        </div>
        <!--下载结果-->
        <!--<div class="div-map  active" id="div-map-download2" style="z-index: 1;">-->
        <!--<button class="btn-runmodel fa fa-download" id="button-map-download2" style="color: #fff;"></button>-->
        <!--</div>-->
    </div>

</div>
<!--警告框-->
<div class="div-alert-diologue" id="div-alert-diologue"></div>

<!--Tree-->


<!--Hydrology,Hydraulics-->
<div class="panel-hydrology-hydraulics-property-value" id="panel-hydrology-hydraulics-property-value">
    <!--title-->
    <div class="titleview" id="panel-hydrology-hydraulics-property-value-title">
        <a href="#" class="list-group-item active titleview-item-left"
           style="border-bottom-right-radius: 0;border-top-right-radius: 0;border-right-color: #ddd;">
            Property
        </a>
        <a href="#" class="list-group-item active titleview-item-right editor"
           style="border-bottom-left-radius: 0;border-top-left-radius: 0;">
            Value
        </a>
    </div>
    <!--content-->
    <div class="dataview" id="dataview">
        <ul class="list-group dataview-group-left" style="margin-bottom: 0px;">
            <div class="dataview-list-left" id="dataview-list-left">

            </div>
        </ul>
        <ul class="list-group dataview-group-right" style="margin-bottom: 0px;">
            <form class="bs-example bs-example-form" id="dataview-list-right" role="form">


            </form>
        </ul>
    </div>

    <div class="div-dataview-group-bottom">
        <div class="input-group pull-right" style="margin-right:10px;margin-top: 5px">
            <button type="button" class="btn btn-primary btn-sm" id="button-dataview-group-submit"
                    style="margin-right: 10px">Submit
            </button>
            <button type="button" class="btn btn-default btn-sm" id="button-dataview-group-cancel">Cancel</button>
        </div>
    </div>
</div>

<!--Option-->
<div class="datapanel" id="panel-simulation-options">
    <div class="panel panel-primary">
        <!--panel title-->
        <div class="panel-heading">
            <h3 class="panel-title">Simulation Options</h3>
        </div>
        <div class="panel-body">
            <!--tab titles-->
            <ul class="nav nav-tabs" id="option-tabs">
                <li class="active"><a href="#option-general" data-toggle="tab">General</a></li>
                <li><a href="#option-dates" data-toggle="tab">Dates</a></li>
                <li><a href="#option-time-steps" data-toggle="tab">Time Steps</a></li>
                <li><a href="#option-dynamic-wave" data-toggle="tab">Dynamic Wave</a></li>
                <li><a href="#option-files" data-toggle="tab">Files</a></li>
            </ul>
            <!--tab content-->
            <div class="tab-content" style="z-index: 1">
                <!--Option General-->
                <div class="tab-pane fade in active dataview-panel" id="option-general">
                    <div class="panel panel-primary col-md-5 dataview-panel-up" style="border:1px solid #ddd">
                        Process Models
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-rainfall-runoff" class="styled" type="checkbox">
                            <label for="checkbox-rainfall-runoff">
                                Rainfall/Runoff
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-rainfall-dependent" class="styled" type="checkbox"
                                   disabled="true/disable">
                            <label for="checkbox-rainfall-dependent">
                                Rainfall Dependent I/I
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-snow-melt" class="styled" type="checkbox" disabled="true/disable">
                            <label for="checkbox-snow-melt">
                                Snow Melt
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-groundwater" class="styled" type="checkbox" disabled="true/disable">
                            <label for="checkbox-groundwater">
                                Groundwater
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-flow-routing" class="styled" type="checkbox">
                            <label for="checkbox-flow-routing">
                                Flow Routing
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-water-quality" class="styled" type="checkbox" disabled="true/disable">
                            <label for="checkbox-water-quality">
                                Water Quality
                            </label>
                        </div>
                    </div>
                    <div class="panel panel-primary col-md-6 dataview-panel-up" style="border:1px solid #ddd">
                        Miscellaneous
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-allow-ponding" class="styled" type="checkbox">
                            <label for="checkbox-allow-ponding">
                                Allow Ponding
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-report-control-actions" class="styled" type="checkbox">
                            <label for="checkbox-report-control-actions">
                                Report Control Actions
                            </label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-report-input-summary" class="styled" type="checkbox">
                            <label for="checkbox-report-input-summary">
                                Report Input Summary
                            </label>
                        </div>
                        <div>
                            Minimum Conduit Slope
                            <input id="input-minimum-conduit-slope" type="text" style="text-align: right;">
                        </div>
                    </div>
                    <div class="panel panel-primary col-md-5 dataview-panel-down"
                         id="div-option-general-infiltration-model" style="border:1px solid #ddd">
                        Infiltration Model
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-infiltration-model"
                                   id="radio-option-general-horton" value="HORTON">
                            <label for="radio-option-general-horton">
                                Horton
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-infiltration-model"
                                   id="radio-option-general-modified-horton" value="MODIFIED_HORTON">
                            <label for="radio-option-general-modified-horton">
                                Modified Horton
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-infiltration-model"
                                   id="radio-option-general-green-ampt" value="GREEN_AMPT">
                            <label for="radio-option-general-green-ampt">
                                Green Ampt
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-infiltration-model"
                                   id="radio-option-general-curve-number" value="CURVE_NUMBER">
                            <label for="radio-option-general-curve-number">
                                Curve Number
                            </label>
                        </div>

                    </div>
                    <div class="panel panel-primary col-md-6 dataview-panel-down" id="div-option-general-routing-model"
                         style="border:1px solid #ddd">
                        Routing Model
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-routing-model"
                                   id="radio-option-general-steady-flow" value="STEADY" checked>
                            <label for="radio-option-general-steady-flow">
                                Steady Flow
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-routing-model"
                                   id="radio-option-general-kinematic-wave" value="KINWAVE">
                            <label for="radio-option-general-kinematic-wave">
                                Kinematic Wave
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-general-routing-model"
                                   id="radio-option-general-dynamic-wave" value="DYNWAVE">
                            <label for="radio-option-general-dynamic-wave">
                                Dynamic Wave
                            </label>
                        </div>

                    </div>
                </div>
                <!--Option Dates-->
                <div class="tab-pane fade dataview-panel" id="option-dates">
                    <div class="row option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">
                            Start Analysis on
                        </div>

                        <div class=" col-md-5">
                            <div class="input-group date form_date" id="div-option-dates-start-analysis-date"
                                 data-date="" data-date-format="mm/dd/yyyy" data-link-field="dtp_input1"
                                 data-link-format="yyyy-mm-dd">
                                <input class="form-control" id="input-option-dates-start-analysis-date" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                            </div>
                        </div>

                        <div class=" col-md-4">
                            <div class="input-group date form_time " id="div-option-dates-start-analysis-time"
                                 data-date="" data-date-format="hh:ii:00" data-link-field="dtp_input2"
                                 data-link-format="hh:ii">
                                <input class="form-control" id="input-option-dates-start-analysis-time" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                            </div>
                        </div>


                    </div>

                    <div class="row option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">
                            Start Reporting on
                        </div>

                        <div class="col-md-5">
                            <div class="input-group date form_date" data-date="" data-date-format="mm/dd/yyyy"
                                 data-link-field="dtp_input3" data-link-format="yyyy-mm-dd">
                                <input class="form-control" id="input-option-dates-start-reporting-date" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="input-group date form_time " data-date="" data-date-format="hh:ii:00"
                                 data-link-field="dtp_input4" data-link-format="hh:ii">
                                <input class="form-control" id="input-option-dates-start-reporting-time" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                            </div>
                        </div>
                    </div>

                    <div class="row option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">End
                            Analysis on
                        </div>

                        <div class="col-md-5">
                            <div class="input-group date form_date" data-date="" data-date-format="mm/dd/yyyy"
                                 data-link-field="dtp_input5" data-link-format="yyyy-mm-dd">
                                <input class="form-control" id="input-option-dates-end-analysis-date" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="input-group date form_time " data-date="" data-date-format="hh:ii:00"
                                 data-link-field="dtp_input6" data-link-format="hh:ii">
                                <input class="form-control" id="input-option-dates-end-analysis-time" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                            </div>
                        </div>
                    </div>

                    <div class="row option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">
                            Start Sweeping on
                        </div>

                        <div class="col-md-5">
                            <div class="input-group date form_date" data-date="" data-date-format="mm/dd"
                                 data-link-field="dtp_input7" data-link-format="yyyy-mm-dd">
                                <input class="form-control" id="input-option-dates-start-sweeping-date" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                            </div>
                        </div>

                    </div>

                    <div class="row option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">End
                            Sweeping on
                        </div>

                        <div class="col-md-5">
                            <div class="input-group date form_date" data-date="" data-date-format="mm/dd"
                                 data-link-field="dtp_input8" data-link-format="yyyy-mm-dd">
                                <input class="form-control" id="input-option-dates-end-sweeping-date" size="16"
                                       type="text" value="" readonly>
                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                            </div>
                        </div>
                    </div>

                    <div class="row option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">
                            Antecedent Dry Days
                        </div>
                        <div class="col-md-5">
                            <input type="text" id="input-option-dates-antecedent-dry-days" class="form-control">
                        </div>
                    </div>

                </div>
                <!--Option Time Step-->
                <div class="tab-pane fade dataview-panel" id="option-time-steps">
                    <div class="option-dates-row">
                        <div class="col-md-3 option-dates-left-title"
                             style="padding-left: 15px;padding-right: 5px;margin-top: 7px;">Reporting
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-timesteps-reportstep-days"
                                   placeholder="Days" style="width:70px">
                            <!--<button class="btn btn-default input-button-up" ><li class="fa fa-caret-up input-caret-up"></li></button>-->
                            <!--<button class="btn btn-default input-button-down"><li class="fa fa-caret-down input-caret-down"></li></button>-->
                        </div>
                        <div class="jeinpbox col-md-3" style="width: 180px;position:absolute;display: inline-block">
                            <input type="text" class="jeinput" id="input-option-timesteps-reportstep-time"
                                   placeholder="HH:MM:SS" style="width: 150px;">
                        </div>
                    </div>

                    <div class="option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px;">
                            Runoff Dry Weather
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-timesteps-drystep-days"
                                   placeholder="Days" style="width:70px">
                        </div>
                        <div class="jeinpbox col-md-3" style="width: 180px;position:absolute;display: inline-block">
                            <input type="text" class="jeinput" id="input-option-timesteps-drystep-time"
                                   placeholder="HH:MM:SS" style="width: 150px;">
                        </div>
                    </div>

                    <div class="option-dates-row">
                        <div class="col-md-3 option-dates-left-title" style="padding-left: 15px;padding-right: 5px">
                            Runoff Wet Weather
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-timesteps-wetstep-days"
                                   placeholder="Days" style="width:70px">
                        </div>
                        <div class="jeinpbox col-md-3" style="width: 180px;position:absolute;display: inline-block">
                            <input type="text" class="jeinput" id="input-option-timesteps-wetstep-time"
                                   placeholder="HH:MM:SS" style="width: 150px;">
                        </div>
                    </div>

                    <div class="option-dates-row">
                        <div class="col-md-3 option-dates-left-title"
                             style="padding-left: 15px;padding-right: 5px;margin-top: 7px;">Routing
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-timesteps-routing-steps"
                                   placeholder="Seconds" style="width:70px">
                        </div>
                    </div>

                    <div class="panel panel-primary col-md-9 " style="border:1px solid #ddd;margin-left: 15px">
                        Steady Flow Periods
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-timesteps-skip-steady-flow" class="styled" type="checkbox" checked>
                            <label for="checkbox-timesteps-skip-steady-flow">
                                Skip Steady Flow Period
                            </label>
                        </div>
                        <div class="row">
                            <div class="option-dates-left-title col-md-7"
                                 style="padding-left: 0px;padding-left: 15px; padding-right: 5px;margin-top: 6px;">
                                System Flow Tolerance(%)
                            </div>
                            <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                                <input type="text" class="form-control"
                                       id="input-option-timesteps-system-flow-tolerance" placeholder="%"
                                       style="width:70px">
                            </div>
                        </div>

                        <div class="row">
                            <div class="option-dates-left-title col-md-7"
                                 style="padding-left: 0px;padding-left: 15px;padding-right: 5px;margin-top: 6px;">
                                Lateral Flow Tolerance(%)
                            </div>
                            <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                                <input type="text" class="form-control"
                                       id="input-option-timesteps-lateral-flow-tolerance" placeholder="%"
                                       style="width:70px">
                            </div>
                        </div>
                    </div>
                </div>
                <!--Option Dynamic Wave-->
                <div class="tab-pane fade dataview-panel" id="option-dynamic-wave">

                    <div class="panel panel-primary col-md-3 dataview-dynamic-wave-panel"
                         id="div-option-dynamicwave-inertialterm" style="border:1px solid #ddd;display: inline-block;">
                        Inertial Terms
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-inertial-terms"
                                   id="radio-option-dyanmic-wave-keep" value="NONE">
                            <label for="radio-option-dyanmic-wave-keep">
                                Keep
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-inertial-terms"
                                   id="radio-option-dyanmic-wave-dampen" value="PARTIAL">
                            <label for="radio-option-dyanmic-wave-dampen">
                                Dampen
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-inertial-terms"
                                   id="radio-option-dyanmic-wave-ignore" value="FULL">
                            <label for="radio-option-dyanmic-wave-ignore">
                                Ignore
                            </label>
                        </div>

                    </div>
                    <div class="panel panel-primary col-md-4 dataview-dynamic-wave-panel"
                         id="div-option-dynamicwave-normalflowcriterion"
                         style="border:1px solid #ddd;display: inline-block;padding-right: 5px">
                        Normal Flow Criterion
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-normal-flow"
                                   id="radio-option-dyanmic-wave-slope" value="SLOPE">
                            <label for="radio-option-dyanmic-wave-slope">
                                Slope
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-normal-flow"
                                   id="radio-option-dyanmic-wave-froude" value="FROUDE">
                            <label for="radio-option-dyanmic-wave-froude">
                                Froude No.
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-normal-flow"
                                   id="radio-option-dyanmic-wave-both" value="BOTH">
                            <label for="radio-option-dyanmic-wave-both">
                                Both
                            </label>
                        </div>

                    </div>
                    <div class="panel panel-primary col-md-4 dataview-dynamic-wave-panel"
                         id="div-option-dynamicwave-forcemainequation"
                         style="border:1px solid #ddd;display: inline-block;">
                        Force Main Equation
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-force-main-equation"
                                   id="radio-option-dyanmic-wave-hazen" value="H-W">
                            <label for="radio-option-dyanmic-wave-hazen">
                                Hazen-Williams
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            <input type="radio" name="radio-option-dyanmic-wave-force-main-equation"
                                   id="radio-option-dyanmic-wave-darcy" value="D-W">
                            <label for="radio-option-dyanmic-wave-darcy">
                                Darcy-Weisbach
                            </label>
                        </div>
                    </div>
                    <div class="option-dynamic-wave-row">
                        <div class="checkbox checkbox-primary col-md-5" style="margin-top:5px;display: inline-block">
                            <input id="checkbox-option-dynamic-wave-use-varibale" class="styled" type="checkbox"
                                   checked>
                            <label for="checkbox-option-dynamic-wave-use-varibale">
                                Use Variable Time Steps
                            </label>
                        </div>
                        <div class="option-dynamic-wave-title col-md-3"
                             style="margin-top:7px;padding-left: 15px;padding-right: 5px;display: inline-block">
                            Adjusted By
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-dynamic-wave-adjusted-by"
                                   placeholder="%" style="width:70px">
                        </div>
                    </div>
                    <div class="option-dynamic-wave-row">
                        <div class="option-dynamic-wave-title col-md-8"
                             style="margin-top:7px;padding-left: 0;display: inline-block">
                            Time Step For Conduit Lengthening (sec)
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-dynamic-wave-time-step-for-conduit"
                                   style="width:70px">
                        </div>
                    </div>
                    <div class="option-dynamic-wave-row">
                        <div class="option-dynamic-wave-title col-md-8"
                             style="margin-top:7px;padding-left: 0;display: inline-block">
                            Minimum Nodal Surface Area (sq.meters)
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-dynamic-wave-minimum-nodal-surface"
                                   style="width:70px">
                        </div>
                    </div>
                    <div class="option-dynamic-wave-row">
                        <div class="option-dynamic-wave-title col-md-8"
                             style="margin-top:7px;padding-left: 0;display: inline-block">
                            Maximum Trials per Time Step
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control" id="input-option-dynamic-wave-maximum-trials-per"
                                   style="width:70px">
                        </div>
                    </div>
                    <div class="option-dynamic-wave-row">
                        <div class="option-dynamic-wave-title col-md-8"
                             style="margin-top:7px;padding-left: 0;display: inline-block">
                            Head Convergence Tolerance (meters)
                        </div>
                        <div class="input-group option-time-steps-input col-md-2" style="display: inline-block">
                            <input type="text" class="form-control"
                                   id="input-option-dynamic-wave-head-convergence-tolerance" style="width:70px">
                        </div>
                    </div>
                </div>
                <!--TODO-->
                <!--Option Files-->
                <div class="tab-pane fade" id="option-files"></div>
            </div>
            <!--buttons-->
            <div class="input-group pull-right" style="margin-right:0px">
                <button type="button" class="btn btn-primary" id="button-option-submit" style="margin-right: 10px">
                    Submit
                </button>
                <button type="button" class="btn btn-default" id="button-option-cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>


<!--UDX的input模态框-->
<div class="modal fade" id="modal-openudx" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content" >
            <div class="modal-header btn-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">Input UDX data</h4>
            </div>
            <div class="modal-body">
                <!--<textarea wrap="off" class="form-control text-area-udxInput" rows="20" placeholder="please input udx data..."></textarea>-->
                <div class="div-udxFileInput">
                    <input class="form-control input-udxFileInput" id="input-udxFileInput" type="text" placeholder="Disabled input here..." disabled>
                    <div class="div-map" id="div-map-openfile" style="z-index: 1;">
                        <form id="form-uploadfile" name="form-uploadfile"  enctype="multipart/form-data;charset=utf-8" style="display:none">
                            <input type="file" id="input-uploadfile" name="input-uploadfile">
                        </form>
                        <button type="button" class="btn btn-warning button-udxFileInput" id="button-map-openfile">Upload Data</button>
                    </div>
                </div>
                <br>
                <a id="a-makeUdxOnline">Make UDX Data Online?</a>
            </div>
            <div class="modal-footer button-udxSubmitCancel">
                <button type="button" id="button-submitInputData" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--选择要使用的模型服务节点-->
<div class="modal fade" id="modal-selectService" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="div-selectService">
            <div class="modal-header btn-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel2">Select SWMM Model Service</h4>
            </div>
            <div class="modal-body">
                <label id="label-SelectModelService" class="label-ModelService"></label>
                <table class="table table-hover table-bordered"  id="table-SelectModelService">
                    <!--<thead>-->
                        <!--<tr>-->
                            <!--<th>#</th>-->
                            <!--<th>Property</th>-->
                            <!--<th>Value</th>-->
                            <!--&lt;!&ndash;<th>Score</th>&ndash;&gt;-->
                        <!--</tr>-->
                    <!--</thead>-->
                    <!--<tbody id="tbody-SelectModelService">-->
                        <!--<tr>-->
                            <!--<th scope="row"></th>-->
                            <!--<td>DESKTOP-62UC2I5</td>-->
                            <!--<td>Windows_NT</td>-->
                            <!--<td>83</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<th scope="row"></th>-->
                            <!--<td>WIN-VR3MDCFJ70H</td>-->
                            <!--<td>Windows_NT</td>-->
                            <!--<td>83</td>-->
                        <!--</tr>-->
                    <!--</tbody>-->
                </table>


            </div>
            <div class="modal-footer button-udxSubmitCancel">
                <button type="button" id="button-submitService" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--模型服务迁移-->
<div class="modal fade" id="modal-migrateService" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="div-serviceMigrate">
            <div class="modal-header btn-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel3">Migrate SWMM Model Service</h4>
            </div>
            <div class="modal-body">
                <span class="label label-info">From Service:</span>
                <label id="label-MigrateModelService-From" class="label-ModelService"></label>
                <table class="table table-hover table-bordered"  id="table-MigrateModelService-From">
                    <!--<thead>-->
                    <!--<tr>-->
                        <!--<th>#</th>-->
                        <!--<th>Name</th>-->
                        <!--<th>Platform</th>-->
                        <!--<th>Score</th>-->
                    <!--</tr>-->
                    <!--</thead>-->
                    <!--<tbody>-->
                    <!--<tr class="success">-->
                        <!--<th scope="row">1</th>-->
                        <!--<td>DESKTOP-62UC2I5</td>-->
                        <!--<td>Windows_NT</td>-->
                        <!--<td>83</td>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<th scope="row">2</th>-->
                        <!--<td>WIN-VR3MDCFJ70H</td>-->
                        <!--<td>Windows_NT</td>-->
                        <!--<td>83</td>-->
                    <!--</tr>-->
                    <!--</tbody>-->
                </table>
                <span class="label label-success">To Service:</span>
                <label id="label-MigrateModelService-To" class="label-ModelService"></label>
                <table class="table table-hover" id="table-MigrateModelService-To">
                    <!--<thead>-->
                    <!--<tr>-->
                        <!--<th>#</th>-->
                        <!--<th>Name</th>-->
                        <!--<th>Platform</th>-->
                        <!--<th>Score</th>-->
                    <!--</tr>-->
                    <!--</thead>-->
                    <!--<tbody>-->
                    <!--<tr class="success">-->
                        <!--<th scope="row">1</th>-->
                        <!--<td>WIN-9BBVMC1FNP5</td>-->
                        <!--<td>Windows_NT</td>-->
                        <!--<td>90</td>-->
                    <!--</tr>-->
                    <!--</tbody>-->
                </table>

            </div>
            <div class="modal-footer button-udxSubmitCancel">
                <button type="button" id="button-migrateService" class="btn btn-primary">Migrate</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--加载等待-->
<!--<div class="div-loading-wait">-->
<!--<div class="dw-btn btn-success" onclick="waitModelRunning()">默认效果</div>-->
<!--</div>-->


<script src="js/jquery-3.3.1.js"></script>
<!--左边的目录树-->
<script src="js/bootstrap-treeview.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.jexcel.js"></script>
<!--Option Dates中的日期时间-->
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!--Option Time Step中的时间选择器-->
<script src="js/jedate.js" type="text/javascript" ></script>
<script src="js/jeDateDemo.js" type="text/javascript" ></script>
<!--loading动画特效-->
<script src="js/loading.js"></script>

<script src='js/ol.js'></script>
<script src="js/jquery.form.js"></script>

<!--引用proj4进行投影转换-->
<script src="js/proj4.js"></script>

<script src="js/bootstrap-table.js"></script>
<script src="js/custom/swmm.js"></script>

</body>

</html>